<template>
  <div class="tendency">
    <div id="line" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 柱状图
import "echarts/lib/chart/bar";
// 折线图
import "echarts/lib/chart/line";
// 标题组件
import "echarts/lib/component/title";
// 图例组件
import "echarts/lib/component/legend";
// 工具栏
import "echarts/lib/component/toolbox";
//
import "echarts/lib/component/markPoint";
// 提示框
import "echarts/lib/component/tooltip";
export default {
  props: ["sevenDate", "sevenDay"],
  data() {
    return {};
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("line"));
    this.initData();
  },
  methods: {
    initData() {
      const color = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        color: color,
        title: {
          text: "走势图",
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["bar", "line"] },
            restore: { show: true },
          },
        },
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"],
        },
        xAxis: [
          {
            type: "category",
            data: this.sevenDay,
            boundaryGap: false,
            axisPointer: {
              type: "line",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "用户",
            min: 0,
            max: 200,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "订单",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "新注册用户",
            type: "line",
            data: this.sevenDate[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增订单",
            type: "line",
            data: this.sevenDate[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增管理员",
            type: "line",
            yAxisIndex: 1,
            data: this.sevenDate[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  watch: {
    sevenDate:function(){
      // console.log('aaaaaaaaaaaaaa',this.sevenDate);
      this.initData()
    },
    sevenDay: function(){
      // console.log('bbbbbbbbbbbbbbbb',this.sevenDay);
      this.initData()
    }
  },
};
</script>

<style>
</style>